<template>
    <aside class="template-aside">
        <div
            v-for="(item, idx) in navList"
            :key="idx"
        >
            <div
                :class="['nav-item', { active: item.isActive }]"
                @click="handleChangeMenu(item.viewId)"
            >
                <div class="item-name">
                    <Logo
                        :class="item.icon"
                        size="16"
                        :name="item.isActive ? item.activeIcon : item.icon"
                    />
                    <span>{{ $t(item.i18nKey) }}</span>
                </div>
                <span class="nav-num">{{ countMap[item.countKey] ?? 0 }}</span>
            </div>
            <p
                v-if="item.countKey === 'ALL'"
                class="item-border"
            />
        </div>
    </aside>
</template>

<script setup name='TemplateGroupAside'>
    import Logo from '@/components/Logo'
    import UseInstance from '@/hook/useInstance'
    import {
        ALL_TEMPLATE_VIEW_ID,
        PIPELINE_TEMPLATE_VIEW_ID,
        // STAGE_TEMPLATE_VIEW_ID,
        // JOB_TEMPLATE_VIEW_ID,
        // STEP_TEMPLATE_VIEW_ID,
        TEMPLATE_VIEW_ID_CACHE
    } from '@/store/modules/templates/constants'
    import { computed, onMounted, ref } from 'vue'

    const { proxy } = UseInstance()
    const countMap = ref({})
    const projectId = computed(() => proxy.$route.params.projectId)
    const currentViewId = computed(() => proxy.$route.params.templateViewId || ALL_TEMPLATE_VIEW_ID)
    const navList = computed(() => {
        const list = [
            {
                viewId: ALL_TEMPLATE_VIEW_ID,
                i18nKey: ALL_TEMPLATE_VIEW_ID,
                icon: 'template-all',
                activeIcon: 'group',
                countKey: 'ALL'
            },
            {
                viewId: PIPELINE_TEMPLATE_VIEW_ID,
                i18nKey: PIPELINE_TEMPLATE_VIEW_ID,
                icon: 'template-pipeline',
                activeIcon: 'pipeline-template-aside',
                countKey: 'PIPELINE'
            }
            // {
            //     viewId: STAGE_TEMPLATE_VIEW_ID,
            //     i18nKey: STAGE_TEMPLATE_VIEW_ID,
            //     icon: 'template-stage',
            //     activeIcon: 'stage-template-aside',
            //     countKey: 'STAGE'
            // },
            // {
            //     viewId: JOB_TEMPLATE_VIEW_ID,
            //     i18nKey: JOB_TEMPLATE_VIEW_ID,
            //     icon: 'template-job',
            //     activeIcon: 'job-template-aside',
            //     countKey: 'JOB'
            // },
            // {
            //     viewId: STEP_TEMPLATE_VIEW_ID,
            //     i18nKey: STEP_TEMPLATE_VIEW_ID,
            //     icon: 'template-step',
            //     activeIcon: 'step-template-aside',
            //     countKey: 'STEP'
            // }
        ]
        return list.map(i => {
            return {
                ...i,
                isActive: currentViewId.value === i.viewId
            }
        })
    })
    async function getType2Count () {
        try {
            countMap.value = await proxy.$store.dispatch('templates/getType2Count', {
                projectId: projectId.value
            })
        } catch (err) {
            console.error(err)
        }
    }
    function handleChangeMenu (templateViewId) {
        localStorage.setItem(TEMPLATE_VIEW_ID_CACHE, templateViewId)
        proxy.$router.push({
            name: 'TemplateManageList',
            params: {
                templateViewId
            }
        })
    }
    onMounted(() => {
        getType2Count()
    })
</script>

<style lang="scss">
    .template-aside{
        height: 100%;
        background: #FFFFFF;
        padding-top: 8px;
        box-shadow: 1px 0 0 0 #EAEBF0, 1px 0 0 0 #DCDEE5;
        .item-name {
            display: flex;
            align-items: center;
        }
        .nav-item {
            display: flex;
            justify-content: space-between;
            padding: 0 32px 0 24px;
            height: 40px;
            align-items: center;
            font-size: 14px;
            color: #4D4F56;
            cursor: pointer;
            svg {
                vertical-align: middle;
                color: #C4C6CC;
                margin: 0 10px;
            }
            .nav-num {
                height: 16px;
                padding: 0 8px;
                background: #F0F1F5;
                border-radius: 8px;
                font-size: 12px;
                color: #979BA5;
                text-align: center;
                line-height: 16px;
            }
        }
        .active{
            background-color: #E1ECFF;
            color: #3A84FF;
            svg {
                color: #3A84FF;
            }
        }
        .item-border {
            border-bottom: 1px solid #DCDEE5;
            margin: 8px 24px;
        }
   }
</style>
